<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <title>登录注册表单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--图标库-->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>

    <!--响应式框架-->
    <link rel='stylesheet' th:href='@{/css/bootstrap.min.css}'>

    <!--主要样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">


</head>

<body>

<div class="container">

    <div class="card-wrap">

        <div class="card border-0 shadow card--welcome is-show" id="welcome">
            <div class="card-body">
                <h2 class="card-title">欢迎光临</h2>
                <p>欢迎进入登录页面</p>
                <div class="btn-wrap"><a class="btn btn-lg btn-register js-btn" data-target="register">注册</a><a class="btn btn-lg btn-login js-btn" data-target="login">登录</a></div>
            </div>
        </div>

        <div class="card border-0 shadow card--register" id="register">
            <div class="card-body">
                <h2 class="card-title">会员注册</h2>
                <p class="card-text">第三方注册</p>
                <p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
                <p>或者使用您的电子邮箱进行注册</p>
                <form th:action="@{~/register}" method="post">
                    <div class="form-group">
                        <input class="form-control" name="username" type="text" placeholder="名称" required="required"/>
                    </div>
                    <div class="form-group">
                        <input class="form-control" name="email" type="email" placeholder="邮箱" required="required"/>
                    </div>
                    <div class="form-group">
                        <input class="form-control" name="password" type="password" placeholder="密码" required="required"/>
                    </div>
                    <button class="btn btn-lg" type="submit">注册</button>
                </form>
            </div>
            <button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
        </div>

        <div class="card border-0 shadow card--login" id="login">
            <div class="card-body">
                <h2 class="card-title">欢迎登录！</h2>
                <p>第三方登录</p>
                <p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
                <p>或用邮箱登录</p>
                <form th:action="@{~/login}" method="post">
                    <div class="form-group">
                        <input class="form-control" name="email" type="email" placeholder="邮箱" required="required"/>
                    </div>
                    <div class="form-group">
                        <input class="form-control" name="password" type="password" placeholder="密码" required="required"/>
                    </div>
                    <p><a href="#">忘记密码?</a></p>
                    <button class="btn btn-lg" type="submit">登录</button>
                </form>
            </div>
            <button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
        </div>

    </div>

</div>

<script th:src="@{/js/index.js}"></script>

</body>
</html>